<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/case/fundPayBackList' }">公积金补缴规则</el-breadcrumb-item>
        <el-breadcrumb-item>添加</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer addPayBack">
      <!-- 添加公积金方案表单 -->
      <div class="customform shebaoform">
        <el-form
          :inline="true"
          :model="rule"
          :rules="rules"
          label-width="120px"
          label-position="left"
          ref="rule"
        >
          <div class="el-form--inline">
            <el-form-item label="参保地" prop="policyAddrId">
              <el-select placeholder="请输入关键字搜索" v-model="rule.policyAddrId" filterable>
                <el-option
                  v-for="item in addrs"
                  :key="item.id"
                  :label="item.addrName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务公司" prop="companyId">
              <company-select :p_value.sync="rule.companyId"></company-select>
            </el-form-item>
            <el-form-item label="可补缴月份" prop="allowSuppTypeCode" class="pay-back-input">
              <el-select v-model="rule.allowSuppTypeCode" placeholder="请选择">
                <el-option label="无限制" value="1"></el-option>
                <el-option label="不可补缴" value="2"></el-option>
                <el-option label="限制补缴年月" value="3"></el-option>
                <el-option label="限制补缴月数" value="4"></el-option>
              </el-select>
              <el-input
                placeholder="请输入"
                v-model="rule.allowMonths"
                type="number"
                v-if="rule.allowSuppTypeCode==4"
              ></el-input>
              <el-date-picker
                v-model="rule.allowYearMonth"
                v-if="rule.allowSuppTypeCode==3"
                type="month"
                placeholder="选择月"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="补缴基数" prop="suppBaseRuleCode" class="pay-back-input">
              <data-dict-select :data-key="40006" :p_value.sync="rule.suppBaseRuleCode"></data-dict-select>
              <el-input
                placeholder="最低基"
                v-model="rule.baseMinAmt"
                v-if="rule.suppBaseRuleCode==40006002"
              ></el-input>
              <el-input
                placeholder="最高基"
                v-model="rule.baseMaxAmt"
                v-if="rule.suppBaseRuleCode==40006002"
              ></el-input>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="补缴险种" prop="typeCode">
              <el-select v-model="rule.typeCodeArr" :multiple="true">
                <el-option
                  :label="item.dictName"
                  :value="item.dictCode"
                  :key="item.id"
                  v-for="item in list"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 添加公积金方案表单结束 -->
      <div class="page-form-btn">
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import CompanySelect from "../../components/CompanySelect";
import DataDictSelect from "../../components/DataDictSelect";

export default {
  name: "addPayBack",
  components: {
    CompanySelect,
    DataDictSelect
  },
  data() {
    const checkSuppTypeCode = (rule, value, callback) => {
      let mouthVal = this.rule.allowMonths;
      let dateVal = this.rule.allowYearMonth;
      if (value == 4) {
        if (mouthVal && Number.isInteger(Number(mouthVal)) && mouthVal > 0) {
          callback();
        } else {
          return callback(new Error("请填写有效月数"));
        }
      } else if (value == 3) {
        if (dateVal) {
          callback();
        } else {
          return callback(new Error("请选择补缴年月"));
        }
      } else {
        callback();
      }
    };
    const checkSupp = (rule, value, callback) => {
      if (value == 40006002) {
        let maxAmt = this.rule.baseMaxAmt;
        let minAmt = this.rule.baseMinAmt;
        if (
          minAmt == "" ||
          minAmt == null ||
          minAmt == undefined ||
          maxAmt == "" ||
          maxAmt == null ||
          maxAmt == undefined ||
          minAmt > maxAmt ||
          minAmt < 0 ||
          maxAmt < 0
        ) {
          return callback(new Error("请输入有效的基数范围"));
        } else {
          callback();
        }
      }else{
        callback();
      }
    };
    return {
      // 公积金表单
      rule: {
        policyAddrId: "",
        companyId: "",
        typeCode: "",
        allowSuppTypeCode: "",
        allowMonths: "",
        allowYearMonth: "",
        suppBaseRuleCode: "",
        baseMinAmt: "",
        typeCode: "",
        typeCodeArr: [],
        baseMaxAmt: ""
      },
      // 必填项目
      rules: {
        policyAddrId: [
          { required: true, message: "请选择参保地", trigger: "change" }
        ],
        companyId: [
          { required: true, message: "请选择服务公司", trigger: "change" }
        ],
        allowSuppTypeCode: [
          { required: true, message: "请选择可补缴月份", trigger: "change" },
          { validator: checkSuppTypeCode, trigger: "blur" }
        ],
        suppBaseRuleCode: [
          { required: true, message: "请选择补缴基数", trigger: "change" },
          { validator: checkSupp, trigger: "blur" }
        ],
        typeCodeArr: [
          {
            type: "array",
            required: true,
            message: "请选择补缴险种",
            trigger: "change"
          }
        ]
      },
      addrs: [],
      list: []
    };
  },
  created() {
    this.getAllAddrs();
    this.getType();
  },
  methods: {
    getType() {
      Http.api.get("dict", { params: { key: 40002 } }).then(res => {
        this.list = res.data;
      });
    },
    getAllAddrs() {
      Http.api.get("/addr/allPermission",{params:{permissionType:1}}).then(res => {
        this.addrs = res.data;
      });
    },
    indexMethod(index) {
      return index + 1;
    },
    // 保存
    save() {
      this.$refs["rule"].validate(v => {
        if (v) {
          this.rule.typeCode = this.rule.typeCodeArr.join(",");
          Http.api.post("/case/accfund/rule", this.rule).then(res => {
            this.$router.push({
              path: "/case/fundPayBackList"
            });
          });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
